<template>
  <view class="content">
    <header-modal></header-modal>

    <!-- 问答 -->
    <view class="question">
      <view class="flex flex-y-center fz40 bold main-theme-color">
        <!-- <sw-icons type="symbol" size="70" icon="icon-shoujicunqu" class="mr10"></sw-icons> -->
        <image class="img-icon" src="../../static/store-icon.png"></image>
        手机存进去怎么取？
      </view>
      <view class="ct flex flex-y-center mt20 fz32">
        <!-- <sw-icons type="symbol" size="80" icon="icon-pingmu" class="mr10"></sw-icons> -->
        <image class="img-icon" src="../../static/store-icon.png"></image>
        <view>在显示屏上用手机[<text class="main-theme-color">手机号码</text>]+[<text class="main-theme-color">4位密码</text>]取件</view>
      </view>
    </view>

    <!-- 设置密码 -->
    <view class="set-password">
      <form @submit="formSubmit">
        <view class="tit fz36">设置取包 <text class="red">手机号码及密码</text></view>
        <view class="ct">
          <view class="flex item">
            <view class="name main-theme-bgcolor fff fz32">手机号码</view>
            <view class="flex1 bg-white">
              <input
                name="storageMobile"
                v-model="state.dataSource.storageMobile"
                class="input fz46"
                type="number"
                maxlength="11"
                placeholder="设置取包手机号码"
                placeholder-class="placeholder"
              />
            </view>
          </view>
          <view class="flex item">
            <view class="name main-theme-bgcolor fff fz32">取包密码</view>
            <view class="flex1 bg-white">
              <input
                name="storagePwd"
                v-model="state.dataSource.storagePwd"
                class="input fz46"
                type="number"
                maxlength="4"
                placeholder="设置4位数取包密码"
                placeholder-class="placeholder"
              />
            </view>
          </view>
        </view>
        <view class="tips mt40 fz36 t-c">
          <view>取包密码建议使用生日日期</view>
          <view>4位生日日期，例如：0101（01月01日）</view>
        </view>
        <button class="btn mt40 main-theme-bgcolor fff" form-type="submit">下一步</button>
      </form>
    </view>

    <!-- 确认弹窗 -->
    <uni-popup ref="popupRef" type="center">
      <view class="popup popup-phone bg-white">
        <view class="tit fz36 t-c">请确认手机号码及密码</view>
        <view class="item mt40">
          <view class="name fz32">手机号码</view>
          <view class="mt20 fz50 t-c">
            {{ state.dataSource.storageMobile.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1') }}
            <text class="red">{{ state.dataSource.storageMobile.replace(/^(\d{3})(\d{4})(\d{4})$/, '$2') }}</text>
            {{ state.dataSource.storageMobile.replace(/^(\d{3})(\d{4})(\d{4})$/, '$3') }}
          </view>
        </view>
        <view class="item mt40">
          <view class="name fz32">取包密码</view>
          <view class="mt20 fz50 t-c scale-in-out">
            {{ state.dataSource.storagePwd.replace(/^(\d{1})(\d{2})(\d{1})$/, '$1') }}
            <text class="red">{{ state.dataSource.storagePwd.replace(/^(\d{1})(\d{2})(\d{1})$/, '$2') }}</text>
            {{ state.dataSource.storagePwd.replace(/^(\d{1})(\d{2})(\d{1})$/, '$3') }}
          </view>
        </view>
        <view class="btn-box mt50 flex t-c fz34">
          <button class="flex1 btn" @click="popopClose">返回修改</button>
          <button class="flex1 btn main-theme-bgcolor fff" @click="onSure" :disabled="state.time > 0">正确 {{ state.time > 0 ? state.time : '' }}</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import HeaderModal from '@/components/header/index.vue';
import { ref, reactive, getCurrentInstance } from 'vue';
import { onReachBottom, onLoad } from '@dcloudio/uni-app';
import { queryByMainBoardId } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();

const popupRef = ref(null);

const time = 3; // 可点击确定计时
const state = reactive({
  dataSource: {},
  availableCellList: [],
  time: 0,
  timer: null
});

// 加载数据
const loadData = () => {
  const data = {
    mainboardId: getApp().globalData.mainboardId
  };
  queryByMainBoardId(data).then(res => {
    const { result } = res;
    state.dataSource.storageMobile = result.wechatMobile;
    state.availableCellList = result.availableCellList;
  });
};

// 页面加载完成
onLoad(async option => {
  await proxy.$onLaunched;
  state.dataSource.storageMobile = getApp().globalData.storageMobile;
  const time = 10 * 60 * 1000; // 10分钟
  if (option.t && new Date().getTime() - option.t > time) {
    proxy.$jump.redirectTo('/pages/index/index');
  }
  loadData();
});

// 倒计时
const countDown = () => {
  if (state.time > 0) {
    state.timer = setTimeout(() => {
      state.time -= 1;
      countDown();
    }, 1000);
  }
};

//手机号码正则表达式验证
const checkPhone = phone => {
  if (!/^1\d{10}$/.test(phone)) {
    return false;
  }
  return true;
};

// 下一步
const formSubmit = e => {
  const formdata = e.detail.value;
  if (!formdata.storageMobile) {
    uni.showToast({
      icon: 'none',
      title: '请输入手机号'
    });
  } else if (!checkPhone(formdata.storageMobile)) {
    uni.showToast({
      icon: 'none',
      title: '请输入正确手机号'
    });
  } else if (!formdata.storagePwd) {
    uni.showToast({
      icon: 'none',
      title: '请输入取包密吗'
    });
  } else if (formdata.storagePwd.length !== 4) {
    uni.showToast({
      icon: 'none',
      title: '请输入正确验证码'
    });
  } else {
    state.dataSource = formdata;
    uni.setStorage({
      key: 'storageMobile',
      data: formdata
    });
    popupRef.value.open();
    clearTimeout(state.timer);
    state.time = time;
    countDown();
  }
};

// 返回修改
const popopClose = () => {
  popupRef.value.close();
};

// 确定
const onSure = () => {
  popopClose();
  if (state.availableCellList.length === 1) {
    proxy.$jump.navigateTo(`/pages/deposit/cellpay?cellType=${state.availableCellList[0].cellType}`);
  } else {
    proxy.$jump.navigateTo('/pages/deposit/celltype');
  }
};

// 关闭页面
const weixinClosePage = () => {
  if (typeof WeixinJSBridge == 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', weixin_ClosePage, false);
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', weixin_ClosePage);
      document.attachEvent('onWeixinJSBridgeReady', weixin_ClosePage);
    }
  } else {
    weixin_ClosePage();
  }
};
const weixin_ClosePage = () => {
  WeixinJSBridge.call('closeWindow');
};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.question {
  position: relative;
  padding: 25rpx 30rpx;
  margin: 30rpx 40rpx;
  border-radius: 30rpx;
  box-shadow: 5rpx 10rpx 30rpx rgba(#000, 0.1);
  .img-icon {
    width:70rpx;
    height:70rpx;
    margin-right:10rpx;
    flex-shrink:0
  }

  .ct {
    line-height: 50rpx;
  }
  &:after {
    content: '';
    position: absolute;
    bottom: -20rpx;
    left: 50%;
    margin-left: -20rpx;
    .triangle(bottom, 20rpx, @bg);
  }
}

.set-password {
  padding: 60rpx 38rpx 0;
  .tit {
    margin-bottom: 40rpx;
  }
  .item {
    line-height: 132rpx;
    margin: 15rpx 0 0;
    .name {
      width: 202rpx;
      text-align: center;
    }
    .input {
      padding: 0 36rpx;
      height: 132rpx;
      line-height: 132rpx;
    }
  }
}

.tips {
  line-height: 75rpx;
}

.btn[disabled]:not([type]) {
  color: #fff;
  background: rgba(@yellow, 0.5);
}

.popup-phone {
  .tit {
    padding-bottom: 10rpx;
  }
  .item {
    padding: 0 25rpx;
  }
  .btn {
    border-radius: 0;
    &:after {
      border-radius: 0;
      border: 0;
    }
  }
}
</style>
